<template>
  <div>
    <div class="workflowmsg" ref="workflowmsg1">
      <h3 class="notice-tit" v-show="noticeData2&&noticeData2.length>0">批示意见</h3>
      <span v-if="loading1" style="padding-left:30px;">正在加载...</span>
      <ul v-else v-show="noticeData2&&noticeData2.length>0">
        <li v-for="item of noticeData2" :key="item.id" style="padding-right:20px">
          <span v-if="item.opinion===''">圈阅</span>
          <span>{{item.opinion}}</span>
          <span style="font-weight:bolder;padding-left:20px;">{{item.sendUserName}}</span>
          <span style="font-weight:bolder;padding-left:20px;">{{item.sendTime}}</span>
          <span style="font-weight:bolder;padding-left:20px;" v-if="item.isFixed">({{item.fixedUserName}}补录)</span>
          <span style="font-weight:bolder;padding-left:20px;" v-if="item.isFixed&&item.canDelete&&inRoles('ROLE_chuzhang')"><el-button type="danger" :loading="delLoading" size="mini" @click.native="deleteApprove(item.id)">删除</el-button></span>
        </li>
      </ul>
    </div>
    <div class="workflowmsg" ref="workflowmsg2">
      <h3 class="notice-tit" v-show="noticeData&&noticeData.length>0">办理提示</h3>
      <span v-if="loading2" style="padding-left:30px;">正在加载...</span>
      <ul v-else v-show="noticeData&&noticeData.length>0">
        <li v-for="item of noticeData" :key="item.id" style="padding-right:20px"><b>{{item.sendUserName}} [{{item.sendTime}}]：</b>{{item.opinion}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'notice',
  props: ['noticePersonId', 'step', 'timestamp'],
  watch: {
    noticePersonId: {
      handler (newName, oldName) {
        this.showNotice()
      },
      immediate: true
    },
    step: {
      handler (newName, oldName) {
        this.showNotice()
      },
      immediate: true
    },
    timestamp: {
      handler (newName, oldName) {
        this.showNotice()
      },
      immediate: true
    }

  },
  data () {
    return {
      delLoading: false,
      loading1: true,
      loading2: true,
      noticeData: [],
      noticeData2: [],
      todoDetailVisible: false,
      personlist: [],
      listLoading: false,
      tableHeight: 100
    }
  },
  methods: {
    inRoles (str) {
      console.log(str)
      let arr = JSON.parse(localStorage.getItem('Roles'))
      // arr = 'aaabbROLE_admin'
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    deleteApprove (id) {
      this.delLoading = true
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/approve/removeFakeLeaderApprove?approveId=` + id)
        .then(response => {
          this.delLoading = false
          if (response.data.success) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.showNotice()
            this.$emit('refresh')
          } else {
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.delLoading = false
          this.$message({
            message: '删除失败:' + error,
            type: 'error'
          })
          this.loading2 = false
        })
    },
    showNotice () {
      if (this.noticePersonId) {
        this.loading1 = true
        this.loading2 = true
        this.noticeData = []
        let para = {
          approveType: 1,
          busCandidatePersonId: this.noticePersonId,
          step: this.step
        }
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/selection/approve/getApproveListByStep`, para)
          .then(response => {
            if (response.data.success) {
              this.noticeData = response.data.result
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
            this.loading1 = false
          })
          .catch(error => {
            this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
            this.loading1 = false
          })
        para = {
          approveType: 2,
          busCandidatePersonId: this.noticePersonId,
          step: this.step
        }
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/selection/approve/getApproveListByStep`, para)
          .then(response => {
            if (response.data.success) {
              this.noticeData2 = response.data.result
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
            this.loading2 = false
          })
          .catch(error => {
            this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
            this.loading2 = false
          })
      }
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        console.log('workflowmsgsheight:' + this.$refs.workflowmsg1.offsetHeight + this.$refs.workflowmsg2.offsetHeight)
      })
    }
  }
}
</script>

<style scoped>
.notice {
  width: 50%;
}
.notice-item {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  margin-top: 8px;
}
.item-left {
  width: 15%;
  font-size: 14px;
}
.item-mid {
  width: 10%;
  font-size: 14px;
  margin-left: 5px;
}
.item-right {
  width: 75%;
  font-size: 14px;
  margin-left: 10px;
  max-height: 40px;
  overflow: hidden;
}
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
</style>
